<template>
	<view class="card">
		<!-- 传入属性isCenter，使标题居中 -->
		<view v-if="isCenter" class="title-center">
			<text class="main-title">{{ title }}</text>
			<view>
				<slot name="main-title"></slot>
			</view>
		</view>
		<view class="title" v-else>
			<view class="left">
				<!-- 主标题的卡槽 -->
				<slot name="main-title"></slot>
				<text class="main-title">{{ title }}</text>
				<!-- 主标题显示是否未读的插槽 -->
				

			</view>
			<view class="right">
				<slot name="fu-title"></slot>
				<slot name="fu-icon"></slot>
				<text>{{ extra }}</text>
			</view>
		</view>
		<view class="main" :class="isBorder ? 'isBorder' : ''">
			<slot name="main" ></slot>
		</view>
		<view class="floot ">
			<view class="left slot">
				<slot name="floot-left"></slot>
			</view>
			<view class="right slot">
				<slot name="floot-right"></slot>
			</view>
		</view>

	</view>
</template>

<script setup>
import { ref } from 'vue'
let props = defineProps({
	title: {
		type: String,
		default: ""
	},
	extra: {
		type: String,
		default: ""
	},
	isBorder: {
		type: Boolean,
		default: false
	},
	isCenter:{
		type: Boolean,
		default: false
	}
})
// console.log(props.isBorder);
console.log(props.isCenter);
</script>

<style lang="scss">
// 底部插槽为空的时候的样式和有内容的时候的样式
.slot {
	padding: 15rpx 0;
}

.slot:empty {
	padding: 0;
	margin: 0;
}

.card {
	margin: 25rpx 30rpx;
	background-color: rgb(255, 255, 255);
	font-size: 28rpx;
	color: rgb(117, 117, 117);
	box-shadow: 0 0 5rpx 5rpx #e0e0e0;
	padding: 15rpx;

	.title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		min-height: 60rpx;
		padding: 10rpx 10rpx;
		.left {
			max-width: 50%;

			.main-title {
				// font-weight: 600;
				color: #000000;
			}
		}

		.right {
			// 右侧副标题的样式
		}

	}
	.title-center{
		text-align: center;
		color: #000000;
	}


	// 主体部分
	.main {
		padding: 25rpx 0rpx;
	}

	.main:empty {
		padding: 0;
		margin: 0;
	}

	// 选择添加上下边框的样式
	.isBorder {
		border-bottom: 3rpx solid #e0e0e0;
		border-top: 3rpx solid #e0e0e0;
	}

	.floot {
		display: flex;
		justify-content: space-between;
		width: 100%;

		.left {
			max-width: 50%;
			word-wrap: break-word;
			word-break: break-all;
		}

		.right {
			max-width: 45%;
			word-wrap: break-word;
			word-break: break-all;
			padding-right: 20rpx;
		}
	}
}
</style>